import React, { Component } from "react"



class StudentList extends Component {
  deList = (index, env) => {
    env.preventDefault()
    console.log('删除执行了', index)
    if(window.confirm('是否确定删除')){
      this.props.deleteList(index)
    }
  }
  render () {
    const { studentList } = this.props
    // console.log(studentList, 0)
    // 定义总年龄
    let ageTotal = 0
    // 定义平均年龄
    let ageAverage = 0
    // 计算总年龄
    studentList.forEach(ele => ageTotal += Number(ele.age))
    // 计算平均年龄
    ageAverage = Math.floor(ageTotal / studentList.length )
    return (
      <div className="col-md-6 col-md-offset-1">
        <table className="table table-striped table-hover">
          <thead>
            <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>所属学院</th>
            <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {
              studentList.map(list => {
                return (
                  <tr key={list.number}>
                    <td>{list.number}</td>
                    <td>{list.name}</td>
                    <td>{list.sex}</td>
                    <td>{list.age}</td>
                    <td>
                      <span>{list.hobbies}</span>
                    </td>
                    <td>{list.college}</td>
                    <td>
                      <a href="" onClick={this.deList.bind(this, `${list.number}` )}>删除</a>
                    </td>
                  </tr>
                )
              })
            }
            
          </tbody>
        </table>
        {studentList.length > 0 ? null : <p className="text-center">无学生信息</p>}
        <p>总共有 {studentList.length} 个学生</p>
        <p>学生的平均年龄是 {ageAverage}</p>
      </div>
    )
  }
}

export default StudentList